<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大朴会员登陆-无甲醛棉品始于大朴</title>
    <link rel="Shortcut Icon" href="http://s.dapuimg.com/favicon.ico" />
    <link rel="stylesheet" href="./../css/enter.css">
</head>

<body>
    <header>
        <div>
            <a href="./../index.html">
                <img src="http://activity.dapuimg.com/2019120310001.png" alt="">
            </a>
        </div>
    </header>


    <!-- -----------main----------- -->
    <script src="../js/ajax.js"></script>
    <main>
        <div>
            <div class="m1">
                <h3>用户登录</h3>
                <hr />
            </div>
            <div class="m2" style="position: relative;">
                <table width="294" height="92" border="0" style="margin:0 auto">
                    <tr>
                        <td width="88">用户名：</td>
                        <td width="190">
                            <input type="text" style="width: 147px;
                                border: 1px solid rgb(218, 217, 217);height: 30px;" class="user">
                        </td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <input type="text" style="width: 147px;
                                border: 1px solid rgb(218, 217, 217);height: 30px;" class="pass">
                        </td>
                    </tr>
                </table>
                <input type="button" class="btn" value="登录" style="position: absolute;bottom: 10px;left: 198px;
                width: 54px;height: 30px;background-color: #49afcd;border: 0;border-radius: 10%;
                color: #fff;">
                <a href="" style="text-decoration: none;position: absolute;bottom: 14px;left:258px; color: #4E8FC2; font-size: 14px;">忘记密码</a>
            </div>
            
            <a href="enroll.html" style="text-decoration: none;margin-left:25%;margin-right:5%;color: #4E8FC2;font-size: 14px;float: left;">手机校验登录</a>|
            <a href="enroll.html" style="text-decoration: none;margin-left: 5%;color: #4E8FC2;font-size: 14px;">免费注册</a>
        </div>

    </main>
    <script src="../js/ajax.js"></script>
    <script>
        let oUser = document.querySelector('.user')
        let oPass = document.querySelector('.pass')
        let oBtn = document.querySelector('.btn')

        oBtn.addEventListener('click', function () {
            if (oUser.value && oPass.value) {
                pAjax({
                    url: '../php/login.php',
                    type: 'post',
                    data: {
                        username: oUser.value,
                        password: oPass.value
                    }
                }).then(function (res) {
                    let obj = JSON.parse(res)
                    if (obj.code === 0) {
                        window.location.href = './../index.html'
                    } else {
                        alert(obj.msg)
                    }

                })
            } else {
                alert("用户名和密码不能为空")
            }
        })

        function pAjax(options) {
            return new Promise(function (resolve, reject) {
                ajax({
                    url: options.url,
                    type: options.type,
                    data: options.data,
                    success(res) {
                        resolve(res)
                    }
                })
            })
        }
    </script>

    <!-- ------------footer-------------- -->
    <footer>
        <div class="f1">
            <ul>
                <li>
                    <a href="">关于大朴</a>
                    <span>丨</span>
                </li>
                <li>
                    <a href="">帮助中心</a>
                    <span>丨</span>
                </li>
                <li>
                    <a href="">联系我们</a>
                    <span>丨</span>
                </li>
                <li>
                    <a href="">手机大朴</a>
                </li>
            </ul>
        </div>
        <div class="f2">
            <p>Copyright © 2012-2015 dapu.com 大朴版权所有 京ICP备12027522号 京ICP证130030号</p>
        </div>
    </footer>
</body>

</html>